<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test1 {
            color: red;
        }
        #test2 {
            color: blue;
        }
        .t1 {
            color: green;
        }
       .t2 {
            color: yellow;
        }
    </style>
</head>
<body>
    <!-- 元素选择器的权重为1 -->
     <!-- 类选择器的权重为10 -->
      <!-- ID选择器的权重为100 -->
       <!-- 内联样式的权重为1000 -->
    <h3>全局选择器：*</h3>
    <h3>元素选择器：标签名称</h3>
    <h3>类选择器：class属性名（.）</h3>
    <h3>ID选择器：ID属性名（#）</h3>
    <p class="test1" id="test2">p标签内容</p>
    <p style="font-size: large;color: green;font-weight: bold;" class="test1" id="test2">p标签内容</p>
    <!-- 从上往下执行代码 -->
    <p class="t1 t2">hahahahahahhahhaaha</p>

</body>
</html>